<template>
	<view v-if="status==0" style="width: 100%;height: 100vh;background-color: #ffffff;">
		<view
			style="width: 678rpx;height: 40rpx;display: flex;align-items: center;justify-content: flex-start;font-size: 28rpx;padding: 36rpx;">
			提现金额 (满¥5.00可提现)</view>
		<view
			style="height: 110rpx;width: 678rpx;margin: 36rpx;border-bottom: 1px solid #CAD5E2;display: flex;align-items: flex-start;justify-content: space-between;">
			<text style="margin-right: 30rpx;font-size: 60rpx;line-height: 60rpx;">¥</text>
			<input auto-focus style="flex: 1;height: 90rpx;font-size: 90rpx;caret-color:#FDC700" type="digit"
				v-model="transferAmount" />
		</view>
		<view
			style="font-size: 28rpx;color: #62748E;height: 40rpx;display: flex;align-items: center;justify-content: flex-start;margin-left: 36rpx;">
			当前可提现余额 ¥{{balance}} <text style="margin-left: 20rpx;color: #1447E6;"
				@click="transferAmount=balance+''">全部提现</text></view>
	</view>
	<view v-else-if="status==1"
		style="width: 100%;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;">
		<view class="top_box" @click="this.$refs.popup.open()">
			<image v-if="account.name=='银行卡'" src="/static/withdraw/bank.png" class="logo" />
			<image v-if="account.name=='微信'" src="/static/withdraw/wx.png" class="logo" />
			<image v-if="account.name=='支付宝'" src="/static/withdraw/zfb.png" class="logo" />
			<text class="t">提现至{{account.name}} {{account.name=='银行卡'?('尾号'+bank.accountNumber.slice(-4)):''}}</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</view>
		<view style="flex: 1;background-color: #ffffff;border-radius: 30rpx 30rpx 0 0;width: 100%;">
			<view
				style="font-size: 28rpx;margin: 36rpx 0;width: 100%;text-align: center;height: 40rpx;line-height: 40rpx;">
				本次提现金额</view>
			<view style="font-size: 90rpx;width: 100%;text-align: center;height: 90rpx;line-height: 90rpx;"><text
					style="font-size: 60rpx;line-height: 60rpx;vertical-align:top;">¥</text>{{transferAmount}}</view>
		</view>
	</view>
	<view v-else-if="status==2" style="width: 100%;height: 100vh;background-color: #ffffff;">
		<image src="https://cdn.meijingnet.cn/huishou/static/img/submit_success.png" mode="widthFix"
			style="width: 260rpx;height: auto;margin: 245rpx 245rpx 0 245rpx;" />
		<view class="none_text">您的提现申请已提交</view>
		<view class="none_text">请留意收款账户内的资金变动明细</view>
	</view>
	<view class="bottom_box safe" @tap="submit" v-if="status<2">
		<view
			:style="{'background-color':transferAmount?'#FFDF20':'#CAD5E2','color':transferAmount?'#020618':'#ffffff'}">
			确认提现</view>
	</view>
	<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff" safe-area>
		<view
			style="display: flex;align-items: center;justify-content: space-between;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/withdraw/title.png" mode="heightFix" style="height: 40rpx;"></image>
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="this.$refs.popup.close()">
			</image>
		</view>
		<view class="i" v-if="bank" @click="account=bank;status=1;this.$refs.popup.close()">
			<image src="/static/withdraw/bank.png" class="logo" />
			<text class="t">银行卡</text>
			<text style="flex: 1;text-align: right;margin-right: 10rpx;">尾号{{bank.accountNumber.slice(-4)}}</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</view>
		<navigator class="i" v-else :url="`/pages/bank/bank?realName=${realName}&idNumber=${idNumber}`">
			<image src="/static/withdraw/bank.png" class="logo" />
			<text class="t">银行卡</text>
			<text style="flex: 1;text-align: right;margin-right: 10rpx; color: #62748E;">立即绑定</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</navigator>
		<!-- #ifdef MP-WEIXIN -->
		<view class="i" v-if="weChat" @click="account=weChat;status=1;this.$refs.popup.close()">
			<image src="/static/withdraw/wx.png" class="logo" />
			<text class="t">微信</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</view>
		<view class="i" v-else @click="bindWx">
			<image src="/static/withdraw/wx.png" class="logo" />
			<text class="t">微信</text>
			<text style="flex: 1;text-align: right;margin-right: 10rpx; color: #62748E;">立即绑定</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</view>
		<!-- #endif -->
		<view class="i" v-if="alipay" @click="account=alipay;status=1;this.$refs.popup.close()">
			<image src="/static/withdraw/zfb.png" class="logo" />
			<text class="t">支付宝</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</view>
		<navigator class="i" v-else :url="`/pages/zfb/zfb?realName=${realName}`">
			<image src="/static/withdraw/bank.png" class="logo" />
			<text class="t">支付宝</text>
			<text style="flex: 1;text-align: right;margin-right: 10rpx; color: #62748E;">立即绑定</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</navigator>
	</uni-popup>
	<view class="mask" v-if="showSms">
		<view class="dialog">
			<view class="title_box">填写验证码
				<image src="/static/icon/close.png" class="close" @click="showSms=false" />
			</view>
			<view
				style="font-size: 40rpx;width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: flex-start;">
				{{phoneTxt}}
			</view>
			<view
				style="font-size: 40rpx;width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: space-between;font-size: 28rpx;border-bottom: 1px solid #CAD5E2;">
				<input placeholder="请输入短信验证码" maxlength="4" type="number" v-model="smsCode" style="width: 350rpx;"/><text
					style="color: #1447E6;" @click="sendSms" v-if="time<=0">获取验证码</text><text style="color: #62748E;"
					v-else>重新发送（{{time}}S）</text>
			</view>
			<view class="btn_box">
				<view style="width: 100%;" @click="transfer">确认</view>
			</view>
		</view>
	</view>
	<view class="mask" v-if="yaorenlianshibie">
		<view class="dialog">
			<image src="/static/icon/close.png" class="close" @click="yaorenlianshibie=false" />
			<view class="content">为了保证您的账户安全，应有关部门要求，提现累计超过2000需要人脸识别验证</view>
			<view class="btn_box">
				<view @click="yaorenlianshibie=false">取消</view>
				<navigator :url="'/pages/face_recognition/face_recognition?name='+realName">前往验证</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js';
	import util from '@/utils/util.js';
	export default {
		data() {
			return {
				balance: 0,
				phone: '',
				phoneTxt: '',
				time: 0,
				status: 0,
				success: false,
				transferAmount: '',
				alipay: null,
				bank: null,
				weChat: null,
				account: null,
				showSms: false,
				smsCode: '',
				realName: '',
				idNumber: '',
				yaorenlianshibie: false,
			}
		},
		async onLoad(options) {
			let {
				result: memberInfo = null
			} = await api.member_info();
			if (memberInfo) {
				this.balance = memberInfo?.balance || 0;
				this.phone = memberInfo.phone;
				this.phoneTxt = memberInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
		},
		async onShow() {
			this.yaorenlianshibie = false;
			this.account_and_auth();
		},
		methods: {
			async account_and_auth() {
				let {
					result
				} = await api.account_and_auth();
				if (result?.alipay) {
					result.alipay.name = '支付宝';
				}
				if (result?.bank) {
					result.bank.name = '银行卡';
				}
				if (result?.weChat) {
					result.weChat.name = '微信';
				}
				if (result?.memberAuthVo?.realName) {
					this.realName = util.desensitizeName(result.memberAuthVo.realName);
				}
				if (result?.memberAuthVo?.idNumber) {
					this.idNumber = util.desensitizeIdCard(result.memberAuthVo.idNumber);
				}
				this.alipay = result?.alipay || null;
				this.bank = result?.bank || null;
				this.weChat = result?.weChat || null;
			},
			async bindWx() {
				let {
					code
				} = await uni.login();
				let e = await api.bind_third_member_account({
					code,
					appid: 'wxbc8c2feaa45add1d',
					channelCode: 'xcx'
				});
				if (e.code == 200) {
					uni.showToast({
						title: '已绑定当前微信',
						icon: 'success',
						duration: 1500
					})
					this.weChat = true;
					this.account_and_auth();
				}
			},
			async sendSms() {
				if (this.time > 0) {
					uni.showToast({
						title: '请勿频繁操作',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				this.time = 60;
				let interval = setInterval(() => {
					this.time -= 1;
					if (this.time == 0) {
						clearInterval(interval);
					}
				}, 1000)
				await api.sms(this.phone);
			},
			submit() {
				if (this.status == 1) {
					this.showSms = true;
					return;
				}
				const amountRegex = /^(?!0\d)([1-9]\d{0,9}|0)(\.\d{1,2})?$/;
				this.transferAmount = this.transferAmount.trim();
				if (!amountRegex.test(this.transferAmount)) {
					uni.showToast({
						title: '错误的金额格式',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				if (this.transferAmount > this.balance) {
					uni.showToast({
						title: '超过可提现金额',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				if (this.transferAmount < 5) {
					uni.showToast({
						title: '提现金额不能少于5元',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				// #ifdef MP-WEIXIN
				if (this.alipay?.isDefault == 1) {
					this.account = this.alipay;
					this.status = 1;
				} else if (this.bank?.isDefault == 1) {
					this.account = this.bank;
					this.status = 1;
				} else if (this.weChat?.isDefault == 1) {
					this.account = this.weChat;
					this.status = 1;
				} else {
					this.$refs.popup.open();
				}
				// #endif
				// #ifdef MP-ALIPAY
					this.$refs.popup.open();
				// #endif
			},
			async transfer() {
				if (!this.smsCode || this.smsCode.length != 4) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				let e = await api.transfer({
					smsCode: this.smsCode,
					accountId: this.account.id,
					transferAmount: this.transferAmount
				});
				if (e.code == 514) {
					this.yaorenlianshibie = true;
					return;
				}
				this.status = 2;
				this.showSms = false;
				// #ifdef MP-WEIXIN
				if (this.account.name == '微信') {
					if (wx.canIUse('requestMerchantTransfer')) {
						wx.requestMerchantTransfer({
							mchId: '1608160385',
							appId: wx.getAccountInfoSync().miniProgram.appId,
							package: e.result.package_info,
							success: (res) => {
								// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
								console.log('success:', res);
							},
							fail: (res) => {
								console.log('fail:', res);
							},
						});
					} else {
						wx.showModal({
							content: '你的微信版本过低，请更新至最新版本。',
							showCancel: false,
						});
					}
				}
				// #endif
			},
		}
	}
</script>

<style>
	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom_box view {
		height: 100%;
		width: 678rpx;
		font-size: 34rpx;
		background-color: #CAD5E2;
		border-radius: 30rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom_box .active {
		background-color: #FFDF20;
		color: #020618;
	}

	.i {
		margin: 36rpx;
		width: 678rpx;
		height: 100rpx;
		background-color: #F8FAFC;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 36rpx;
		gap: 20rpx;
	}

	.i .logo {
		width: 50rpx;
		height: 50rpx;
	}

	.i .to_right {
		width: 32rpx;
		height: 32rpx;
	}

	.i .t {
		flex: 1;
		font-size: 30rpx;
	}

	.top_box {
		width: 100%;
		height: 120rpx;
		border-radius: 0 0 30rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
		box-sizing: border-box;
		padding: 0 36rpx;
	}

	.top_box .logo {
		height: 40rpx;
		width: 40rpx;
	}

	.top_box .to_right {
		width: 32rpx;
		height: 32rpx;
	}

	.top_box .t {
		flex: 1;
		font-size: 28rpx;
	}
</style>